<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>__SITENAME__</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link type="text/css" href="__DOMAINURL____WEBSITEDIR____BAOFENG__/css/public.css" rel="stylesheet" />
    <link href="__DOMAINURL____WEBSITEDIR____PLUGINS__/css/fonts/iconfont.css" rel="stylesheet" type="text/css" />

    <script src="__DOMAINURL____WEBSITEDIR____PLUGINS__/jQuery/jquery-2.2.3.min.js"></script>
    <script src="__DOMAINURL____WEBSITEDIR____PLUGINS__/vue/vue.min.js"></script>
    <link type="text/css" href="__DOMAINURL____WEBSITEDIR____PLUGINS__/layer/mobile/need/layer.css" rel="stylesheet" />
    <script src="__DOMAINURL____WEBSITEDIR____PLUGINS__/layer/mobile/layer.js"></script>

    <style>
        html {background:#f0f0f0;}
        body { padding-bottom: 70px; }
        img {border: 0;width: 100%;}
        button {
            -webkit-appearance: none;
            border: 0;
            background: 0 0;
        }

        .mui-page {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .delivery-order {
            font-size: 12px;
        }
        .delivery-order .receiving-address-edit {
            background-color: #fff;
            margin-bottom: 10px;
        }
        .delivery-order .receiving-address-edit .item {
            height: 35px;
            border-bottom: 1px solid #dbdade;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
        }
        .delivery-order .item-btn {
            padding: 10px 30px;
        }

        .delivery-order .receiving-address {
            padding-bottom: 11px;
            background: url(__DOMAINURL____WEBSITEDIR____BAOFENG__/img/line.jpg) repeat-x 0 100% #fff;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
        }
        .delivery-order .icon-address {
            width: 15px;
            display: block;
            margin: 0 12px 0 15px;
        }
        .delivery-order .address-info {
            -webkit-box-flex: 1;
            padding: 10px 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        .delivery-order .address-info-user {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            margin-bottom: 5px;
        }
        .delivery-order .user-name {
            display: block;
            -webkit-box-flex: 1;
        }
        .delivery-order .icon-right {
            width: 32px;
            height: 75px;
            background: url(__DOMAINURL____WEBSITEDIR____BAOFENG__/img/enter.png) no-repeat 50%;
            background-size:35%;
        }

        .delivery-order .good-info {
            margin-bottom: 8px;
            background-color: #fff;
            border: 1px solid #dbdade;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            padding: 8px 0;
        }
        .delivery-order .good-img {
            width: 84px;
            height: 84px;
            border: 1px solid #dbdade;
            margin: 0 8px 0 17px;
        }
        .delivery-order .good-info-box {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-flex: 1;
            padding-right: 8px;
        }
        .delivery-order .good-name {
            display: block;
            margin-top: 5px;
            font-size: 14px;
        }
        .delivery-order .prize-box {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            margin-top: 10px;
            font-size: 12px;
        }
        .delivery-order .good-info .prize {
            display: block;
            color: #f45832;
            -webkit-box-flex: 1;
        }
        .delivery-order .icon-dif {
            width: 18px;
            height: 18px;
            background: url(__DOMAINURL____WEBSITEDIR____BAOFENG__/img/icon-dif.png) no-repeat 50%;
            background-size:70%;
            display: block;
            border: 1px solid #979797;
            border-right: none;
        }
        .mui-btn, input {
            outline: none;
            font-size: 12px;
        }

        .delivery-order .item input {
            border: none;
            padding: 0 0 0 20px;
            margin: 0;
        }
        .delivery-order .receiving-address-edit .item input {
            display: block;
            height: 100%;
            line-height: 34px;
        }

        .delivery-order .good-info input {
            height: 18px;
            width: 33px;
            border: 1px solid #979797;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        .delivery-order .icon-add {
            width: 18px;
            height: 18px;
            background: url(__DOMAINURL____WEBSITEDIR____BAOFENG__/img/icon-add.png) no-repeat 50%;
            background-size:70%;
            display: block;
            border: 1px solid #979797;
            border-left: none;
        }

        .delivery-order .order-item {
            height: 30px;
            border-top: 1px solid #dbdade;
            background-color: #fff;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
            padding: 0 10px;
            font-size: 12px;
        }
        .delivery-order .order-item-end {
            border-bottom: 1px solid #dbdade;
        }
        .delivery-order .order-item .label {
            display: block;
            -webkit-box-flex: 1;
        }
        .delivery-order .order-item .value {
            display: block;
            color: #f45832;
        }
        .delivery-order .order-item .value-black {
            color: #000;
        }

        .delivery-order .total {
            position: fixed;
            height: 35px;
            left: 0;
            bottom: 0;
            width: 100%;
            border-top: 1px solid #dbdade;
            background-color: #fff;
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            padding-left: 10px;
        }
        .delivery-order .total .label {
            display: block;
        }
        .delivery-order .total .prize {
            display: block;
            color: #f45832;
            padding-left: 20px;
            -webkit-box-flex: 1;
        }
        .mui-btn {
            display: block;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            height: 35px;
            color: #fff;
            padding: 0;
            margin: 0;
            line-height: 1em;
        }
        .mui-btn-blue {
            background-color: #2093ec;
        }
        .mui-btn-red {
            background-color: #f45832;
        }
        .delivery-order .total .mui-btn {
            width: 80px;
            border-radius: 0;
            -webkit-border-radius: 0;
        }
    </style>
</head>
<body>


<div class="mui-page delivery-order" id="app">

    <div class="receiving-address-edit" v-if="deliveryAddress.id==0 || showEdit == true">
        <input type="hidden" v-model="deliveryAddress.id" v-bind:value="deliveryAddress.id">
        <div class="item"><input type="text" v-model="deliveryAddress.rel_name" v-bind:value="deliveryAddress.rel_name" maxlength="20" placeholder="收货人真实姓名"></div>
        <div class="item"><input type="tel" v-model="deliveryAddress.mobile" v-bind:value="deliveryAddress.mobile" placeholder="请填写手机号"></div>
        <div class="item"><input type="text" v-model="deliveryAddress.province" v-bind:value="deliveryAddress.province" placeholder="请填写省份"></div>
        <div class="item"><input type="text" v-model="deliveryAddress.city" v-bind:value="deliveryAddress.city" maxlength="20" placeholder="请填写市"></div>
        <div class="item"><input type="text" v-model="deliveryAddress.address" v-bind:value="deliveryAddress.address" maxlength="50" placeholder="请填写详细地址"></div>
        <div class="item item-btn"><button class="mui-btn mui-btn-blue" @click="saveinfo">保存收货地址</button></div>
    </div>

    <div class="receiving-address" v-if="deliveryAddress.id > 0">
        <img class="icon-address" src="__DOMAINURL____WEBSITEDIR____BAOFENG__/img/Shape.png">
        <div class="address-info">
            <div class="address-info-user">
                <span class="user-name"><!-- react-text: 8 -->收货人:<!-- /react-text --><!-- react-text: 9 -->{!deliveryAddress.rel_name!}<!-- /react-text --></span>
                <span class="phone">{!deliveryAddress.mobile!}</span>
            </div>
            <span class="address"><!-- react-text: 12 -->收货地址:<!-- /react-text --><!-- react-text: 13 -->{!deliveryAddress.province!}<!-- /react-text --><!-- react-text: 14 -->{!deliveryAddress.city!}<!-- /react-text --><!-- react-text: 15 -->{!deliveryAddress.address!}<!-- /react-text --></span>
        </div>
        <div class="icon-right" @click="upDeliveryAddress"></div>
    </div>

    <div class="good-info">
        <img class="good-img" src="{$category.img}">
        <div class="good-info-box">
            <span class="good-name">{$category.name}</span>
            <div class="prize-box">
                <span class="prize"><!-- react-text: 96 -->￥<!-- /react-text --><!-- react-text: 97 -->{$category.money}<!-- /react-text --></span>
                <span class="num"></span>
            </div>
            <div class="prize-box">
                <span class="prize"></span><span class="icon-dif"></span><span class="num"><input type="tel" onkeypress="keyPress()" onchange="jisuan()" id="num" value="1"></span><span class="icon-add"></span>
            </div>
        </div>
    </div>

    <div class="order-item"><span class="label">商品总额</span><span class="value" id="price"><!-- react-text: 108 -->￥<!-- /react-text --><!-- react-text: 109 -->{$category.money}<!-- /react-text --></span></div>
    <div class="order-item order-item-end"><span class="label">运费</span><span class="value value-black"><!-- react-text: 113 -->￥<!-- /react-text --><!-- react-text: 114 -->15<!-- /react-text --></span></div>
    <div class="order-item order-item-end" style="margin-top: 10px;"><span class="label">可用提货劵</span><span class="value">无</span></div>

    <div class="total"><span class="label">合计</span><span class="prize" id="sum_price"><!-- react-text: 121 -->￥<!-- /react-text --><!-- react-text: 122 -->465<!-- /react-text --></span><button onclick="sub()" class="mui-btn mui-btn-red">提交订单</button></div>
</div>

<script>
    var deliveryAddress = {$deliveryAddress};
    var sub = true;//防止重复提交
    Vue.config.delimiters = ['{!', '!}'];
    var vue = new Vue({
        el: '#app',
        data: {
            deliveryAddress: deliveryAddress,
            showEdit:false
        },
        events:{},
        methods: {
            init: function () {

            },
            upDeliveryAddress:function(){
                this.showEdit = true;
            },
            saveinfo:function () {
                if (sub == true) {
                    sub = false;
                    var t = this;
                    if (t.deliveryAddress.rel_name == "") {
                        layer.open({
                            content: '收货人真实姓名不能为空'
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                        return;
                    }
                    if (t.deliveryAddress.mobile == "") {
                        layer.open({
                            content: '请填写手机号码'
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                        return;
                    }
                    if (t.deliveryAddress.province == "") {
                        layer.open({
                            content: '请填写省份'
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                        return;
                    }
                    if (t.deliveryAddress.city == "") {
                        layer.open({
                            content: '请填写市'
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                        return;
                    }
                    if (t.deliveryAddress.address == "") {
                        layer.open({
                            content: '请填写详细地址'
                            ,skin: 'msg'
                            ,time: 2 //2秒后自动关闭
                        });
                        return;
                    }

                    $.ajax({
                        type: 'POST',
                        dataType : 'json',
                        url:'__DOMAINURL____WEBSITEDIR__/shopping/saveinfo' ,
                        data: t.deliveryAddress,
                        success: function(json) {
                            sub = true;
                            if(json.code ==1) {
                                t.deliveryAddress.id = json.id;
                                t.showEdit = false;
                            } else{
                                layer.open({
                                    content: json.msg
                                    ,skin: 'msg'
                                    ,time: 2 //2秒后自动关闭
                                });
                            }
                        }
                    });
                } else {
                    layer.open({
                        content: '已提交，请耐心等待'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }
            }
        },
    });
    vue.init();
</script>
<script>
    $(function () {
        $(".icon-dif").on("click", function () {
            var num = parseInt($("#num").val())-1;
            if (num < 1) {
                num = 1;
            }
            $("#num").val(num).change();
        });
        $(".icon-add").on("click", function () {
            var num = parseInt($("#num").val())+1;
            $("#num").val(num).change();
        });
    });

    var price = parseInt('{$category.money}');
    var yunfei = 15;
    function jisuan() {
        var num = parseInt($("#num").val());
        $("#price").html("￥" + num * price);
        $("#sum_price").html("￥" + (num * price + yunfei));
    }

    function keyPress() {
        var keyCode = event.keyCode;
        if ((keyCode >= 48 && keyCode <= 57)) {
            event.returnValue = true;
        } else {
            event.returnValue = false;
        }
    }
    
    function sub() {
        var num = $("#num").val();
        var id = {$category.id};
        if (num == "") {
            layer.open({
                content: '参数错误'
                ,skin: 'msg'
                ,time: 2 //2秒后自动关闭
            });
            return;
        }

        $.ajax({
            type: 'POST',
            dataType : 'json',
            url:'__DOMAINURL____WEBSITEDIR__/shopping/sub_buy' ,
            data: {num:num, id:id},
            success: function(json){
                layer.open({
                    content: json.msg
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
            }
        });
    }
</script>
</body>
</html>